<template>
  <div class="wrapper">
    <!--  header部分  -->
    <header>
      <p>积分明细</p>
    </header>

    <!--   积分顶部部分       -->

    <ul class="list">
      <li>
        <p>类型</p>
      </li>
      <li>
        <p>数值</p>
      </li>
      <li>
        <p>时间</p>
      </li>
    </ul>

    <!--         积分列表部分       -->
    <ul class="columns">
      <li v-for="(item, index) in IntegralList" :key="index">
        <div class="infoByOrder">
          <li class="item-row odd" v-if="index % 2 === 0">
            {{ item.type | Filter }}
          </li>
          <li class="item-row even" v-else>
            {{ item.type | Filter }}
          </li>
          <li class="item-row odd" v-if="index % 2 === 0">
            {{ item.count }}
          </li>
          <li class="item-row even" v-else>
            {{ item.count }}
          </li>
          <li class="item-row odd" v-if="index % 2 === 0">
            {{ item.time }}
          </li>
          <li class="item-row even" v-else>
            {{ item.time }}
          </li>
        </div>
      </li>
    </ul>

    <!--   底部菜单部分     -->
    <Footer></Footer>
  </div>
</template>



<script >
import Footer from "@/components/Footer.vue";

export default {
  name:'IntegralList',
  data(){
    return{
      user:{},
      IntegralList:[]
    }
  },

  created() {
    this.user = this.$getSessionStorage('user');

    this.$axios.post('IntegralTransController/listIntergralTransByUserId', this.$qs
        .stringify({
          userId: this.user.userId
        })).then(response => {
      this.IntegralList = response.data;
    }).catch(error => {
      console.error(error);
    });
  },

  filters: {
    Filter(value) {
      return value == 1 ? "收入" : "支出";
    }
  },
  methods:{

  },

  components:{
    Footer
  }
}
</script>



<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
//background-color: #ffffff;
  /*
  background: radial-gradient(circle at center, transparent 0, transparent 45%, red 45%, red 55%, transparent 55%, transparent 100%),
  radial-gradient(circle at left bottom, transparent 0, transparent 45%, red 45%, red 55%, transparent 55%, transparent 100%),
  radial-gradient(circle at right bottom, transparent 0, transparent 45%, red 45%, red 55%, transparent 55%, transparent 100%);
   */
}


/***************************************header部分**/
.wrapper header {
  width: 100%;
  height: 12vw;
  background: linear-gradient(#F37373, #F08080, #EF9292);
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;

}

/***********    顶部信息栏   ************/
.wrapper .list{
  width: 99%;
  height: 10vw;
  margin-top: 12vw;
  margin-left: 2px;

  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  color: #666;
  background-color:#FDD4D4;
  margin-bottom: 2px;

}
.wrapper .list li{
  width: 33%;
  padding-top:2vw;
  padding-left: 1vw;
  border: 1px solid white; /* 设置白色边框 */
}

.wrapper .list p{
  font-size: 4vw;
}


.wrapper .columns{
  padding-bottom: 12vw;
}

.wrapper .columns .infoByOrder{
  width: 99%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
  margin-right: 1vw;
  margin-left: 0.5vw;
  color:#555555;
}
.wrapper .columns .infoByOrder li{
  width:33%;
  height: 15vw;
  font-size: 3.2vw;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item-row.odd {
  background-color:#FFF8E9 ;
}

.item-row.even {
  background-color: #FFCFCF
}

/* 信息列表 */






</style>